<template>
	<div>
		<div class="h2">活动详情</div>
		<div class="main" :style="{ height: layoutContentHeight }">
			<div class="h3">基础信息</div>
			<a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }" @submit="handleSubmit">
				<a-form-item label="学生组织/班级">
					<a-input disabled v-show="false" v-decorator="['ClubID', { rules: [{ required: true, message: '活动标题不能为空' }] }]" />
					<a-input disabled v-decorator="['ClubName', { rules: [{ required: true, message: '活动标题不能为空' }] }]" />
				</a-form-item>
				<a-form-item label="活动类型"><a-input disabled v-decorator="['TypeName', { rules: [{ required: true, message: '类型不能为空' }] }]" /></a-form-item>
				<a-form-item label="活动标题" v-show="form.getFieldValue('TypeItemID')">
					<a-input disabled v-show="false" v-decorator="['TypeItemID', { rules: [{ required: true, message: '活动标题不能为空' }] }]" />
					<a-input disabled v-decorator="['TypeItemName', { rules: [{ required: true, message: '类型不能为空' }] }]" />
				</a-form-item>
				<a-form-item label="活动时长（h）" v-if="IsHour">
					<a-input disabled type="number" v-decorator="['HourNum', { rules: [{ required: true, message: '请输入活动时间' }] }]" />
				</a-form-item>
				<a-form-item label="活动标题" v-show="!form.getFieldValue('TypeItemID')">
					<a-input disabled v-decorator="['Title', { rules: [{ required: true, message: '活动标题不能为空' }] }]" />
				</a-form-item>
				<a-form-item label="诚信值" v-show="form.getFieldValue('ClubID')" >
					<a-input  disabled type="number" placeholder="请输入诚信值" v-decorator="['HonestyScore', { rules: [{ required: true, message: '请输入诚信值' }] }]" />
				</a-form-item>
				<a-form-item label="是否需要提交作业" v-show="form.getFieldValue('ClubID')" >
					<a-radio-group  disabled v-decorator="['IsNeedActivityJob', { rules: [{ required:true, message: '请选择是否需要提交作业' }]}]">
						<a-radio :value="true">是</a-radio>
						<a-radio :value="false">否</a-radio>
					</a-radio-group>
				</a-form-item>
				<a-form-item label="是否需要报名" v-show="form.getFieldValue('ClubID')">
					<a-radio-group disabled v-decorator="['IsNeedApply', { rules: [{ required: true, message: '请选择是否需要报名' }] }]">
						<a-radio :value="true">是</a-radio>
						<a-radio :value="false">否</a-radio>
					</a-radio-group>
					<oprateBtn class="tishi" icon="icon-wenhao" color="green" title="如是，参加活动必须先报名，然后签到；如为否，不需要提前报名加入，活动现场扫码即可"></oprateBtn>
				</a-form-item>
				<a-form-item label="报名时间" v-show="form.getFieldValue('IsNeedApply') && form.getFieldValue('ClubID')">
					<a-range-picker
						show-time
						disabled
						v-decorator="['ApplyTime', { rules: [{ required: form.getFieldValue('IsNeedApply') && form.getFieldValue('ClubID') ? true : false, message: '报名时间不能为空' }] }]"
					/>
				</a-form-item>
				<a-form-item label="参加活动是否需要审批" v-show="form.getFieldValue('IsNeedApply') && form.getFieldValue('ClubID')">
					<a-radio-group disabled v-decorator="['ApplyIsNeedExam', { rules: [{ required: true, message: '请选择参加活动是否需要审批' }] }]">
						<a-radio :value="true">是</a-radio>
						<a-radio :value="false">否</a-radio>
					</a-radio-group>
					<oprateBtn class="tishi" icon="icon-wenhao" color="green" title="如是，申请加入活动人员必须审批通过才可加入；如为否，申请加入活动人员申请后无需审批直接加入"></oprateBtn>
				</a-form-item>
				<a-form-item label="是否设置奖项" v-show="form.getFieldValue('ClubID')">
					<a-radio-group disabled v-decorator="['IsHasPrize', { rules: [{ required: true, message: '请选择参加活动是否需要审批' }] }]">
						<a-radio :value="true">是</a-radio>
						<a-radio :value="false">否</a-radio>
					</a-radio-group>
					<oprateBtn class="tishi" icon="icon-wenhao" color="green" title="如果选择设置奖项，则需在申请完结之前添加奖项，否则无法提交完结申请"></oprateBtn>
				</a-form-item>
				<a-form-item label="活动时间">
					<a-range-picker show-time disabled v-decorator="['activityDate', { rules: [{ required: true, message: '活动时间不能为空' }] }]" />
				</a-form-item>
				
				<a-form-item label="活动人数" v-show="form.getFieldValue('ClubID')">
					<a-input disabled v-decorator="['PeopleNum', { rules: [{ required: true, message: '活动人数不能为空' }] }]" />
				</a-form-item>
				<a-form-item v-for="item in data" :label="item.Name">
					<a-input
						disabled
						v-if="item.FieldType == 1"
						v-decorator="[
							item.ID,
							{ rules: [{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' }, { validator: rules[item.ID] ? rules[item.ID].validator : '' }] }
						]"
					/>
					<div v-if="item.FieldType == 2">{{ item.Value }}</div>
					<!-- <a-input
						disabled
						v-if="item.FieldType == 2"
						type="textarea" :auto-size="global.textareaHeight"
						v-decorator="[
							item.ID,
							{ rules: [{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' }, { validator: rules[item.ID] ? rules[item.ID].validator : '' }] }
						]"
					/> -->
					<a-input
						disabled
						v-if="item.FieldType == 3"
						type="number"
						v-decorator="[
							item.ID,
							{ rules: [{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' }, { validator: rules[item.ID] ? rules[item.ID].validator : '' }] }
						]"
					/>
					<a-input
						disabled
						v-if="item.FieldType == 4"
						type="number"
						v-decorator="[
							item.ID,
							{ rules: [{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' }, { validator: rules[item.ID] ? rules[item.ID].validator : '' }] }
						]"
					/>
					<!-- {{ JSON.stringify(rules) }} -->
					<a-upload
						disabled
						v-if="item.FieldType == 5 || item.FieldType == 6"
						v-decorator="[item.ID, { rules: [{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' }] }]"
						:accept="item.FieldType == 5 ? '.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document' : 'image/*'"
						:multiple="true"
						:action="requestUrl + '/Common/DoUploadFile?type=' + (item.FieldType == 5 ? 'file' : 'image')"
						list-type="picture-card"
						:file-list="fileList[item.ID]"
						@preview="handlePreview"
						@change="e => handleChange(e, item.ID)"
					></a-upload>
					<a-date-picker
						disabled
						v-if="item.FieldType == 7"
						@change="e => dataChange(e, item.ID, 'data')"
						v-decorator="[item.ID, { rules: [{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' }] }]"
					/>
					<a-time-picker
						disabled
						v-if="item.FieldType == 8"
						@change="e => dataChange(e, item.ID, 'time')"
						v-decorator="[item.ID, { rules: [{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' }] }]"
					/>
				</a-form-item>
				<!-- <a-form-item class="fixed-bottom" :wrapper-col="{ span: 12, offset: 5 }"><a-button type="primary" html-type="submit">提交</a-button></a-form-item> -->
			</a-form>
			<div class="h3" v-if="VenueReserveData.length > 0">场地信息</div>
			<div class="message" style="margin: 15px 0;">
				<a-list class="fileListArea" size="small" v-if="VenueReserveData.length > 0" bordered
					:data-source="VenueReserveData">
					<a-list-item slot="renderItem" slot-scope="item, index" style="display: flex;">
						<div style="width: 124px">{{ item.Date }} :</div>
						<div style="flex: 1;text-align: left;">{{ item.VenueTimeTable }} --
							{{ item.VenueName }}</div>
						<a-tag v-if="item.State"
							:color="item.State===1?'#87d068':item.State===2?'#2db7f5':'#f50'">
							{{ item.State===1?'预约成功':item.State===2?'取消预约':'退订' }}</a-tag>
					</a-list-item>
				</a-list>
			</div>
		</div>
		<div class="main-apply">
			<div class="h3">学生组织信息</div>
			<div class="message">
				<div class="con">
					<div class="tit">名 称：</div>
					<div class="cell">{{ info.ClubName || info.ClassName }}</div>
				</div>
				<div class="con">
					<div class="tit">成员数量：</div>
					<div class="cell">{{ info.MemberNum }}</div>
				</div>
				<div class="con">
					<div class="tit">主席姓名：</div>
					<div class="cell">{{ info.ChargeUserName }}</div>
				</div>
				<div class="con">
					<div class="tit">主席学号：</div>
					<div class="cell">{{ info.ChargeUserNo }}</div>
				</div>
				<div class="con">
					<div class="tit">添加时间：</div>
					<div class="cell">{{ info.AddTime }}</div>
				</div>
			</div>
			<div class="h3">附件信息</div>
			<div class="message">
				<!-- <a-list class="fileListArea" size="small" bordered :dataSource="oldList">
					<a-list-item slot="renderItem" slot-scope="item, index" style="display: flex;">
						<div style="flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
							<div style="width: 96%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{ item.Type == 2 ? '[完结]' : '[其他]' }}{{ item.FileName }}</div>
						</div>
							<a-icon type="download" @click="downloadFile(item, 1)" style="height: 12px;vertical-align: top;margin-top: 4px;margin-right:12px;cursor: pointer;"></a-icon>
					</a-list-item>
				</a-list> -->
				<div class="tableZdy">
					<div class="imagecon">
						<div class="imagelist" v-for="(item,i) in oldList" :key="i">
							<div class="iconcon">
								<img v-if="item.FilePath.indexOf('jpg')>0||item.FilePath.indexOf('png')>0" :src="requestUrl+item.FilePath" />
								<div v-else class="fileicon">{{ item.FilePath.split('.')[1] }}</div>
							</div>
							<div class="title">{{ item.FileName }}</div>
							<div class="oprate">
								<oprateBtn title="下载" icon="icon-xiazai-wenjianxiazai-04" color="#1890FF" @tap="downloadFile(item, 1)" ></oprateBtn>
							</div>
						</div>
						<div class="el-table__empty-text" style="margin:0 auto;" v-show="oldList.length==0"></div>
					</div>
				</div>
			</div>
			
			<div class="h3">审批信息</div>
			<a-steps class="apply-con" progress-dot v-if="flowData.length > 0" :current="999" direction="vertical">
				<a-step v-for="(item, index) in flowData" :key="index">
					<template slot="title">
						{{ item.FlowTypeName + (item.ExamUserName ? ' | ' + item.ExamUserName + ' | ' : '') + (item.IsAdopt == null ? ' | 未审核' : item.IsAdopt ? '通过' : '驳回') }}
					</template>
					<div slot="title" class="flowuser flex" v-if="item.ExamUserData&&item.ExamUserData.length>0">
						可审批人：
						<div class="flowusercon flex-1">
							<div class="flowuserlist" v-for="(flowitem, flowindex) in item.ExamUserData" :key="flowindex">{{ flowitem.Name }} - {{ flowitem.UserNo }} - {{ flowitem.DepartName }}</div>
						</div>
					</div>
					<div slot="subTitle">{{ item.ExamComment }}</div>
					<div slot="description">{{ item.ExamTime }}</div>
				</a-step>
			</a-steps>
			<div v-if="flowData.length == 0" class="nothing">暂无审批信息</div>
		</div>
		<apply :text="text" v-show="applyIf" @closeFun="closeFun"></apply>
		<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel"><img alt="example" style="width: 100%" :src="previewImage" /></a-modal>
	</div>
</template>

<script>
import Cache from '@/utils/cache';
import moment from 'moment';
import Func from '@/utils/func';
import { getActivityDetail, GetActivityTypeList, GetActivityFileList } from '@/api/follow';
import apply from './apply';
const data = [];
export default {
	components: {
		apply
	},
	data() {
		return {
			layoutContentHeight: window.innerHeight - 268 + 'px',
			icofileList: [],
			fileList: {},
			previewVisible: false,
			previewImage: '',
			fileList1: [],
			previewVisible1: false,
			previewImage1: '',
			data,
			flowData: [],
			applyIf: false,
			ActivityTypeList: [],
			formLayout: 'horizontal',
			form: this.$form.createForm(this, {
				name: 'coordinated'
			}),
			formValue: {},
			dataValue: {},
			VenueReserveData:[],
			info: {},
			rules: {
				// validator: (rule, val, callback) => {
				// 			// var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]");
				// 			let pattern = /^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/;
				// 			if (!pattern.test(val)) {
				// 				callback('请输入正确手机号');
				// 			} else {
				// 				callback();
				// 			}
				// 			callback();
				// 		}
			},
			text: {},
			oldList: [],
			requestUrl: this.global.requestUrl,
			token: Cache.get('token'),
			IsHour: true
		};
	},
	computed: {},
	created() {
		this.getOtherList();
		this.getList();
	},
	mounted() {},
	methods: {
		moment,
		applyHander() {
			// let item={id:this.$route.query.ID}
			this.text = { ID: this.$route.query.ID };
			this.applyIf = true;
		},
		async downloadFile(item) {
			let hrefUrl = this.requestUrl + '/Manage/ActivityFile/DownFile?userToken=' + encodeURIComponent(this.token) + '&id=' + item.ID;
			window.open(hrefUrl, '_blank');
		},
		async getOtherList() {
			let res = await GetActivityTypeList();
			this.ActivityTypeList = res.data.data;
			let data = {};
			data.activityID = this.$route.query.ID;
			let res1 = await GetActivityFileList(data);
			this.oldList = res1.data.data;
		},
		async getList() {
			let that = this;
			let data = {};
			data.id = this.$route.query.ID;
			let res = await getActivityDetail(data);
			this.info = res.data.data;
			this.data = res.data.formData;
			this.flowData = res.data.flowData;
			this.VenueReserveData = res.data.resultVenueReserveData||[];
			this.form.setFieldsValue({
				ClubName: res.data.data.ClubName || res.data.data.ClassName,
				ClubID: res.data.data.ClubID,
				TypeItemName: res.data.data.TypeItemName,
				TypeItemID: res.data.data.TypeItemID,
				Title: res.data.data.Title,
				IsNeedApply: res.data.data.IsNeedApply,
				IsHasPrize: res.data.data.IsHasPrize,
				activityDate: [res.data.data.StartTime, res.data.data.EndTime],
				ApplyTime: [res.data.data.ApplyStartTime, res.data.data.ApplyEndTime],
				TypeID: res.data.data.TypeID,
				Ico: res.data.data.Ico,
				ApplyIsNeedExam: res.data.data.ApplyIsNeedExam,
				PeopleNum: res.data.data.PeopleNum<0?'不限':res.data.data.PeopleNum,
				HourNum: res.data.data.HourNum,
				TypeName: res.data.data.TypeName,
				HonestyScore:res.data.data.HonestyScore,
				IsNeedActivityJob:res.data.data.IsNeedActivityJob,
			});
			this.icofileList = res.data.data.Ico
				? [
						{
							uid: 0,
							name: res.data.data.Ico.split('|')[0],
							status: 'done',
							url: this.requestUrl + res.data.data.Ico.split('|')[1]
						}
				  ]
				: [];
			setTimeout(function() {
				if (that.info.HourNum > 0) {
					that.IsHour = true;
				} else {
					that.IsHour = false;
				}
				let list = res.data.formData;
				for (var i = 0; i < list.length; i++) {
					if (list[i].FieldType == 8) {
						that.form.setFieldsValue({
							[list[i].ID]: list[i].Value.indexOf('2020-10-10') > -1 ? list[i].Value : '2020-10-10 ' + list[i].Value
						});
					} else {
						that.form.setFieldsValue({
							[list[i].ID]: list[i].Value
						});
					}
					if (list[i].FieldType == 5 || list[i].FieldType == 6) {
						that.fileList = Object.assign(that.fileList, { [list[i].ID]: [] });
					}
				}
				for (let i in that.fileList) {
					for (let n = 0; n < list.length; n++) {
						if (list[n].ID == i) {
							let arr = list[n].Value.split(',');
							for (let m = 0; m < arr.length; m++) {
								if (arr[m]) {
									that.fileList[i].push({ uid: m, url: that.requestUrl + arr[m].split('|')[1], name: arr[m].split('|')[0], status: 'done' });
								}
							}
						}
					}
				}
			}, 500);
		},
		closeFunction(data) {
			this.$emit('closeFun', data);
		},
		closeFun() {
			this.applyIf = false;
		},
		handleCancel() {
			this.previewVisible = false;
			this.previewImage = '';
		},
		async handlePreview(file) {
			// let nameType = file.name.substr(file.name.lastIndexOf('.') + 1)
			// if(this.global.imgTypeList.findIndex(m=>{return m==nameType})<0){
			// 	this.$message.error('该文件格式不支持预览')
			// 	return false
			// }else{
			// 	this.previewImage = file.url;
			// 	this.previewVisible = true;
			// }
			this.previewImage = file.url;
			window.open(this.previewImage, '_blank');
		},
		icohandleChange({ fileList }, name) {
			this.icofileList = fileList;
			if (fileList.length == 0) {
				this[name] = {};
			} else {
				if (fileList[0].status == 'done') {
					this[name] = this.requestUrl + fileList[0].response.url;
					let url = this.requestUrl + fileList[0].response.url;
					this.formValue = Object.assign(this.formValue, { [name]: url });
				}
			}
		},
		handleChange({ fileList }, name) {
			this.fileList[name] = fileList;
			if (fileList.length == 0) {
				this[name] = {};
			} else {
				if (fileList[0].status == 'done') {
					this[name] = this.requestUrl + fileList[0].response.url;
					let url = this.requestUrl + fileList[0].response.url;
					this.formValue = Object.assign(this.formValue, { [name]: url });
				}
			}
		},
		dataChange(e, name, type) {
			if (type == 'data') {
				let time = moment(e).format('YYYY-MM-DD HH:mm:ss');
				this.dataValue = Object.assign(this.dataValue, { [name]: time });
			} else {
				let time = moment(e).format('HH:mm:ss');
				this.dataValue = Object.assign(this.dataValue, { [name]: time });
			}
		},
		handleSubmit(e) {
			e.preventDefault();
			this.form.validateFields(async (err, values) => {
				if (!err) {
					let data = values;
					data = Object.assign(data, this.formValue, this.dataValue);
					if (data.activityDate) {
						data.StartTime = moment(data.activityDate[0]).format('YYYY-MM-DD HH:mm:ss');
						data.EndTime = moment(data.activityDate[1]).format('YYYY-MM-DD HH:mm:ss');
					}
					data.ClubID = '63e6e20243d04c0094fe3cb27b244720';
					let res = await UpdateActivity(data);
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.main {
	height: 90%;
	width: 60%;
	overflow-y: scroll;
	float: left;
}
.main-apply {
	width: 36%;
	float: right;
	.apply-con {
		margin-top: 20px;
		/deep/.ant-steps-item-content {
			width: 90%;
		}
		/deep/.ant-steps-item-subtitle {
			display: block;
			margin-left: 0px;
		}
	}
	.nothing {
		text-align: center;
		margin: 50px auto;
	}
	.message {
		padding: 10px;
		.con {
			width: 100%;
			line-height: 40px;
			height: 40px;
			border-bottom: 1px dashed #eee;
			padding: 0 10px;
			overflow: hidden;
			.tit {
				float: left;
				width: 90px;
			}
			.cell {
				float: left;
			}
		}
	}
}
.h3 {
	font-size: 14px;
	background: #f6f8f8;
	color: #1890ff;
	padding: 4px 10px;
}
/deep/.ant-form-item {
	margin: 4px 10px;
	display: flex;
}
/deep/.ant-form-item-label {
	width: 180px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: right;
}
/deep/.ant-form-item-control-wrapper {
	flex: 1;
}
/deep/.ant-calendar-picker,
/deep/.ant-time-picker {
	width: 100%;
}
.fixed-top {
	width: inherit;
	position: absolute;
	line-height: 30px;
	top: 0px;
	background-color: white;
	z-index: 999;
	padding: 10px 0 0 10px;
}
.fixed-bottom {
	width: 164px;
	left: 50%;
	bottom: 0px;
	margin: 0px 0px 0px -82px !important;
	background-color: white;
	z-index: 999;
}
/deep/.ant-form {
	margin-top: 10px;
	padding-bottom: 10px;
}
.ant-calendar-picker,
.ant-time-picker {
	width: 100%;
}
</style>
